<template>
  <!-- 库存列表 -->
  <div style="color: white">
    <div class="topView">
      <el-form :model="searchModel" class="searcView">
        <!-- <el-form-item label="" :label-width="formLabelWidth"> -->
        <el-input
          v-model="searchModel.scanStr"
          placeholder="商品名称"
          style="width: 183px; margin-right: 10px"
        ></el-input>
        <!-- </el-form-item> -->

        <!-- <el-form-item label="" :label-width="formLabelWidth"> -->
        <el-select v-model="searchModel.checkCategory" placeholder="选择类目">
          <el-option label="百货食品" value="baihuo"></el-option>
          <el-option label="服装鞋包" value="fuzhuabg"></el-option>
          <el-option label="美妆饰品" value="meizhuabg"></el-option>
        </el-select>
        <!-- </el-form-item> -->

        <el-button size="small" class="searchBtn" @click="searchClick"
          >查询</el-button
        >
        <el-button
          size="small"
          class="searchBtn"
          @click="resettingClick"
          style="margin-left: 10px; background: rgb(68, 98, 170)"
          >重置</el-button
        >
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      class="tableView"
      :data="tabaData"
      stripe
      border
      max-height="700px"
      style="width: 100%"
    >
      <el-table-column prop="img" label="商品图片" align="center">
        <template slot-scope="scope">
          <!-- <el-image :src="scope.row.tabaData.img"></el-image> -->
          <img
            src="https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg"
            alt=""
            width="100"
            height="100"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="category"
        label="所属类目"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="frontPrice"
        label="前端显示价格"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="settle"
        label="结算价"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="totalStock"
        label="总入库存"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="outStock"
        label="已出库存"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="saleStock"
        label="可售库存"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="210" align="center">
        <template v-slot="scope">
          <el-button
            @click="rukuClick(scope.row)"
            size="mini"
            style="background: rgb(41, 59, 105); color: white"
            >+单品入库
          </el-button>
          <el-button
            @click="chukuClick(scope.row)"
            size="mini"
            style="background: rgb(190, 15, 1); color: white"
            >-单品出库
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px auto; width: 600px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next,total,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        :total="100"
      >
      </el-pagination>
    </div>
    <!-- 单品入库 -->
    <el-dialog
      width="50%"
      title="单品入库"
      :visible.sync="rukuDialogClick"
      left
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-form
        class="rowlayout"
        :model="rukuFormModel"
        :label-width="formLabelWidth"
      >
        <el-form-item label="入库单号:">
          <el-input v-model="rukuFormModel.oddNum" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="商品信息:">
          <el-image :src="rukuFormModel.img"> </el-image>
        </el-form-item>

        <el-form-item label="商品名称:">
          <el-input v-model="rukuFormModel.name" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="商品所属类目:">
          <el-input
            v-model="rukuFormModel.category"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="前端显示价格:">
          <el-input
            v-model="rukuFormModel.displayPrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="结算价格:">
          <el-input
            v-model="rukuFormModel.settlePrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="总入库:">
          <el-input
            v-model="rukuFormModel.totalinventory"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="可售库存:">
          <el-input
            v-model="rukuFormModel.availInventory"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="*入库数量:" color:red>
          <el-input v-model="rukuFormModel.rukushuliang"></el-input>
        </el-form-item>

        <el-form-item label="备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea"
            style="width: 320px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" align="center">
        <el-button
          @click="confirmRukuDialogClick"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          center
          >确认入库</el-button
        >
      </div>
    </el-dialog>

    <!-- 单品出库 -->
    <el-dialog
      width="50%"
      title="单品入库"
      :visible.sync="chukuDialogClick"
      left
    >
    <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-form
        class="rowlayout"
        :model="rukuFormModel"
        :label-width="formLabelWidth"
      >
      <el-form-item label="出库订单号:" :label-width="formLabelWidth">
        <el-input v-model="chukuFormModel.oddNum" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="商品信息:">
          <el-image :src="chukuFormModel.img"> </el-image>
        </el-form-item>

        <el-form-item label="商品名称:" :label-width="formLabelWidth">
          <el-input v-model="chukuFormModel.name" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="商品所属类目:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.category"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="前端显示价格:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.displayPrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="结算价格:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.settlePrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="总入库:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.totalinventory"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="可售库存:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.availInventory"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="*出库原因:" :label-width="formLabelWidth">
          <el-select
            v-model="chukuFormModel.chukureason"
            placeholder="请选择出库原因"
            style="width: 320px;"
          >
            <el-option label="换货" value="baihuo"></el-option>
            <el-option label="退货" value="fuzhuabg"></el-option>
            <el-option label="补发" value="meizhuabg"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="*出库数量:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.chukuCount"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-form-item label="*收货人电话:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.phone"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-form-item label="*收货城市:" :label-width="formLabelWidth">
          <el-select style="width: 100px;" v-model="chukuFormModel.province" placeholder="请选择省份">
          </el-select>
          <el-select style="width: 100px; margin-left: 10px;" v-model="chukuFormModel.city" placeholder="请选择市">
          </el-select>
          <el-select style="width: 100px; margin-left: 10px;" v-model="chukuFormModel.area" placeholder="请选择区">
          </el-select>
        </el-form-item>

        <el-form-item label="*详细地址:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.address"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-form-item label="*快递公司:" :label-width="formLabelWidth">
          <el-select
            v-model="chukuFormModel.expressCompany"
            placeholder="请选择快递公司"
            style="width: 320px;"
          >
            <el-option label="圆通速递" value="baihuo"></el-option>
            <el-option label="百世快递" value="fuzhuabg"></el-option>
            <el-option label="中通速递" value="meizhuabg"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="*运单号:" :label-width="formLabelWidth">
          <el-input
            v-model="chukuFormModel.waybillNum"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea2"
            style="width: 320px"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer"  align="center">
        <el-button
          @click="confirmRukuDialogClick"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          >确认出库</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "inventoryList",
  data() {
    return {
      tabaData: [
        {
          id: "",
          imge: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          frontPrice: "1800",
          settle: "900",
          totalStock: "999",
          outStock: "888",
          saleStock: "111",
        },
        {
          imge: "",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          frontPrice: "1800",
          settle: "900",
          totalStock: "999",
          outStock: "888",
          saleStock: "111",
        },
        {
          imge: "",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          frontPrice: "1800",
          settle: "900",
          totalStock: "999",
          outStock: "888",
          saleStock: "111",
        },
        {
          imge: "",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          frontPrice: "1800",
          settle: "900",
          totalStock: "999",
          outStock: "888",
          saleStock: "111",
        },
        {
          imge: "",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          frontPrice: "1800",
          settle: "900",
          totalStock: "999",
          outStock: "888",
          saleStock: "111",
        },
      ],

      rukuFormModel: {
        oddNum: "3665599855663322",
        img: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg", //商品图片
        name: "ENC糖果", //商品名称
        displayPrice: 1555, //前端显示价格
        category: "服装>裤子>牛仔裤", //商品所属类目
        settlePrice: 888, //结算价格
        totalinventory: 8888, //总库存
        availInventory: 666, //可售库存
      },
      rukushuliang: "555", //入库数量
      textarea: "",

      chukuFormModel: {
        oddNum: "3665599855663322",
        img: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg", //商品图片
        name: "ENC糖果", //商品名称
        displayPrice: 1555, //前端显示价格
        category: "服装>裤子>牛仔裤", //商品所属类目
        settlePrice: 888, //结算价格
        totalinventory: 8888, //总库存
        availInventory: 666, //可售库存
        chukureason: "", //出库原因
        chukuCount: "", //出库数量
        phone: "", //收货人电话
        province: "", //省
        city: "", //市
        area: "", //区
        address: "", //详细地址
        expressCompany: "", //快递公司
        waybillNum: "运单号",
      },
      textarea2: "备注2",

      searchModel: {
        scanStr: "",
        checkCategory: "",
      },
      formLabelWidth: "120px",
      rukuDialogClick: false,
      chukuDialogClick: false,
    };
  },
  computed: {},

  methods: {
    // 查询按钮
    searchClick() {},
    //重置按钮
    resettingClick() {},
    rukuClick() {
      console.log("+++");
      this.rukuDialogClick = true;
    },
    chukuClick() {
      console.log("---");
      this.chukuDialogClick = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //确认入库
    confirmRukuDialogClick() {
      console.log("确认入库");
    },
  },
};
</script>

<style scoped>
.topView {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 45px;
  padding: 20px;
}
span {
  color: black;
  /* background-color: red; */
}

.searcView
/* display: flex 默认水平排列 */ {
  display: flex;
  /* background-color: red; */
}
.searchBtn {
  margin-left: 50px;
  width: 100px;
  height: 30px;
  color: white;
  background-color: rgb(41, 59, 105);
}

.tableView {
  margin-top: 20px;
}

/* .rowlayout
{
  background-color: red;
} */

.el-input {
  width: 320px;
}
.el-input.is-disabled {
  width: 320px;
}
.el-input.is-disabled /deep/ .el-input__inner {
  color: #333;
}
/* 默认不可操作情况 修改边框生效 */
/* .el-input.is-disabled{
  background:#dbdada;
  border: 1px solid #868686;
} */
.el-image {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
</style>
